* {

    margin: 0;

    padding: 0;

    text-decoration: none;

    list-style: none;

}

.main {

    /* max-width: 800px;
    让整个网页只有800宽 */
    
    margin: auto;
    /* 让它水平居中 */

}

.header,
.nav,
.container,
.footer {

    /* 这四个盒子都要左浮动 */

    float: left;

    /* 让它们满浏览器 */

    width: 100%;

    /* 内边距会影响整个盒子的实际大小，这里有一种方法可以处理，让它不影响 */

    box-sizing: border-box;
    /* 就是这句 */

}

.header {

    background: #ccc;

    padding: 20px;

    text-align: center;

}

.nav {

    background: #333;
    height: 60px;

}

.nav a {

    color: #fff;

    padding: 10px 20px;

    display: inline-block;
    /* 让链接以块的形式显示 */
    

}

.nav a:hover {

    background: #bbb;

    color: #000;


}

/* 我们让左右两边都固定宽度200 */

.lside {

    width: 200px;

    float: left;

}

.rside {

    width: 200px;

    float: right;

}

/* 所以中间栏要加左右边距 */

.content {

    margin: 0px 205px;

}

.lside,
.rside,
.content {

    padding: 5px;

    box-sizing: border-box;
    /* 去掉内边距影响 */

}

.footer {

    padding: 10px;

    background: #ccc;

    text-align: center;

}

/* 最后加个功能，当浏览宽度小于700时，三个栏进行竖排 */

@media screen and (max-width:700px) {

    .lside,
    .rside,
    .content {

        width: 100%;

        margin: 0px;
        margin: 0px;
        /*消除外边距影响*/
    }
}
iframe{
    width: 100%;
    height: 100%;
}

